<template>
  <div class="box">
    <van-nav-bar title="健康档案" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-notice-bar wrapable :scrollable="false" text="根据国家有关规定，就诊人在未实名认证状态下，平台
    将无法提供诊断、药品、挂号等服务，请及时实名认
     证!。" />

    <div v-if="list.length === 0">
      <van-empty description="暂无数据" />
    </div>

    <div class="ban" v-else>
      <div v-for="(item,index) in list" :key="index" class="cont" >
        <div class="cont_l">

          {{item.userrelation}}
        </div>
        <div class="cont_c">

          <dd>
            {{item.username}}
            {{item.userage}}
            {{item.usersex}}
          </dd>
          <dd>{{item.userphone}}</dd>
        </div>
        <div class="cont_r">
          <span>已认证</span>
        </div>
      </div>
    </div>



    
     <div class="btn">
      <van-button type="primary" block @click="dian">新建档案</van-button>
     </div>

    





  </div>

</template>

<script setup lang="ts">
  import {
    ref,
    onMounted
  } from "vue";
  import axios from "axios"

  import {
    useRouter
  } from "vue-router"
  const router = useRouter()

  const onClickLeft = () => {
    router.back()
  }
  const dian = () => {
    router.push("/newprofile")
  }
  const list = ref < any > ([])
  onMounted(() => {
    getList()
  })
  const getList = () => {
    axios.get('/api/user/list').then(res => {
      console.log(res);
      list.value = res.data.data
    })
  }

</script>

<style lang="scss" scoped>
  .box {
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;


  }

  .ban {
    width: 100%;
    height: 390px;
    margin-top: 10px;
   

    .cont {
      width: 95%;
      height: 60px;
      margin: 0 auto;
      display: flex;
      background: #ffffff;
      border-radius: 10px;
      margin-top: 8px;

      .cont_l {
        width: 50px;
        height: 50px;
        margin-left: 10px;
        border-radius: 50%;
        background: skyblue;
        text-align: center;
        line-height: 50px;
        margin-top: 5px;

        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-top: 5px;

        }
      }

      .cont_c {
        margin-left: 10px;
        margin-top: 10px;
        font-weight: bold;

      }

      .cont_r {
        width: 50px;
        height: 25px;
        border-radius: 10px 10px 10px 0;
        background: #e1f6f1;
        margin-left: 140px;
        text-align: center;
        margin-top: 5px;
        line-height: 25px;
        color: #1bbc94;
        span{

        }


      }
    }

  }

  .btn {
    width: 100%;
    height: 50px;
    background: #fff;
   position: fixed;
   bottom: 0;
  }

</style>
